@use './variables.scss' as *;
@use './mixin.scss' as *;

// 从基础色阶到全局变量（Level 4 → Level 3）的引用，可保证设计系统中所有功能色（如警示、主操作、正文、背景等）在色彩空间上的和谐统一
@use './palette.scss' as *;

[class^='#{$sun-prefix}'] {
  // 组件盒模型 全部设置为 边框盒模型
  box-sizing: border-box;

  // 默认颜色
  color: var(--semi-color-text-0);

  // 默认 字体相关
  @include font-size-regular;

  font-weight: $font-weight-regular;
}

body {
  //  ========= 圆角 =========
  --semi-border-radius-extra-small: 3px; // 超小圆角，用于 checkbox 内圆角
  --semi-border-radius-small: 3px; // 小圆角, 用于 button、tag、tabs 等大多数组件, 比较常用
  --semi-border-radius-medium: 6px; // 中圆角, 用于 dropdown、scrollist、transfer 等菜单类组件
  --semi-border-radius-large: 12px; // 大圆角, 用于 modal
  --semi-border-radius-circle: 50%; // 全圆角, 用于 avatar, badge 等组件
  --semi-border-radius-full: 9999px; // 用于创建全尺寸圆角，如胶囊标签等
}

body,
body[theme-mode='dark'] .semi-always-light {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;

  --semi-color-white: rgb(
    var(--semi-white),
    1
  ); // 浅色模式下深色背景内容Inverse

  --semi-color-black: rgb(
    var(--semi-black),
    1
  ); // 深色模式下浅色背景内容Inverse

  //  ========= brand color 品牌色 =========
  // 用户界面主强调色及各交互态颜色，通常用于主操作按钮等
  --semi-color-primary: rgb(
    var(--semi-blue-5),
    1
  ); // 主要颜色。仅在需要非常强调的情况下使用。

  --semi-color-primary-hover: rgb(var(--semi-blue-6), 1); // 主要颜色悬浮态
  --semi-color-primary-active: rgb(var(--semi-blue-7), 1); // 主要颜色激活态
  --semi-color-primary-disabled: rgb(var(--semi-blue-2), 1); // 主要颜色禁用态
  --semi-color-primary-light-default: rgb(
    var(--semi-blue-0),
    1
  ); // 浅版主要颜色（多用于背景）。仅在需要非常强调的情况下使用。

  --semi-color-primary-light-hover: rgb(
    var(--semi-blue-1),
    1
  ); // 浅版主要颜色悬浮态

  --semi-color-primary-light-active: rgb(
    var(--semi-blue-2),
    1
  ); // 浅版主要颜色激活态

  // 次级组件中使用，配合品牌色进行页面颜色搭配
  --semi-color-secondary: rgb(
    var(--semi-light-blue-5),
    1
  ); // 次要颜色。强调作用次于主要颜色，但仍然具有强调作用。

  --semi-color-secondary-hover: rgb(
    var(--semi-light-blue-6),
    1
  ); // 次要颜色悬浮态

  --semi-color-secondary-active: rgb(
    var(--semi-light-blue-7),
    1
  ); // 次要颜色激活态

  --semi-color-secondary-disabled: rgb(
    var(--semi-light-blue-2),
    1
  ); // 次要颜色禁用态

  --semi-color-secondary-light-default: rgb(
    var(--semi-light-blue-0),
    1
  ); // 浅版次要颜色（多用于背景）。强调作用次于主要颜色，但仍然具有强调作用。

  --semi-color-secondary-light-hover: rgb(
    var(--semi-light-blue-1),
    1
  ); // 浅版次要颜色悬浮态

  --semi-color-secondary-light-active: rgb(
    var(--semi-light-blue-2),
    1
  ); // 浅版次要颜色激活态

  // 第三级级组件中使用，配合品牌色进行页面颜色搭配，如: button / anchor / dropdown 等
  --semi-color-tertiary: rgb(
    var(--semi-grey-5),
    1
  ); // 第三颜色，可以在页面上多次使用

  --semi-color-tertiary-hover: rgb(var(--semi-grey-6), 1); // 第三颜色悬浮态
  --semi-color-tertiary-active: rgb(var(--semi-grey-7), 1); // 第三颜色激活态
  --semi-color-tertiary-light-default: rgb(
    var(--semi-grey-0),
    1
  ); // 浅版第三颜色（多用于背景），可以在页面上多次使用

  --semi-color-tertiary-light-hover: rgb(
    var(--semi-grey-1),
    1
  ); // 浅版第三颜色悬浮态

  --semi-color-tertiary-light-active: rgb(
    var(--semi-grey-2),
    1
  ); // 浅版第三颜色激活态

  //  ========= functional color 功能色 =========
  --semi-color-info: rgb(
    var(--semi-blue-5),
    1
  ); // 信息色, 通常用于表达客观、中立信息

  --semi-color-info-hover: rgb(var(--semi-blue-6), 1); // 信息色悬浮态
  --semi-color-info-active: rgb(var(--semi-blue-7), 1); // 信息色激活态
  --semi-color-info-disabled: rgb(var(--semi-blue-2), 1); // 信息色禁用态
  --semi-color-info-light-default: rgb(
    var(--semi-blue-0),
    1
  ); // 浅版信息色（多用于背景），通常用于表达客观、中立信息

  --semi-color-info-light-hover: rgb(var(--semi-blue-1), 1); // 浅版信息色悬浮态
  --semi-color-info-light-active: rgb(
    var(--semi-blue-2),
    1
  ); // 浅版信息色激活态

  --semi-color-success: rgb(
    var(--semi-green-5),
    1
  ); // 成功色，表示安全、成功、开启的状态

  --semi-color-success-hover: rgb(var(--semi-green-6), 1); // 成功色悬浮态
  --semi-color-success-active: rgb(var(--semi-green-7), 1); // 成功色激活态
  --semi-color-success-disabled: rgb(var(--semi-green-2), 1); // 成功色禁用态
  --semi-color-success-light-default: rgb(
    var(--semi-green-0),
    1
  ); // 浅版成功色（多用于背景），表示安全、成功、开启的状态

  --semi-color-success-light-hover: rgb(
    var(--semi-green-1),
    1
  ); // 浅版成功色悬浮态

  --semi-color-success-light-active: rgb(
    var(--semi-green-2),
    1
  ); // 浅版成功色激活态

  --semi-color-danger: rgb(
    var(--semi-red-5),
    1
  ); // 危险色，表示危险的操作、或需要特别注意的危险信息

  --semi-color-danger-hover: rgb(var(--semi-red-6), 1); // 危险色悬浮态
  --semi-color-danger-active: rgb(var(--semi-red-7), 1); // 危险色激活态
  --semi-color-danger-light-default: rgb(
    var(--semi-red-0),
    1
  ); // 浅版危险色（多用于背景），表示危险的操作、或需要特别注意的危险信息

  --semi-color-danger-light-hover: rgb(
    var(--semi-red-1),
    1
  ); // 浅版危险色悬浮态

  --semi-color-danger-light-active: rgb(
    var(--semi-red-2),
    1
  ); // 浅版危险色激活态

  --semi-color-warning: rgb(
    var(--semi-orange-5),
    1
  ); // 警示色，表示警告、不安全的状态

  --semi-color-warning-hover: rgb(var(--semi-orange-6), 1); // 警示色悬浮态
  --semi-color-warning-active: rgb(var(--semi-orange-7), 1); // 警示色激活态
  --semi-color-warning-light-default: rgb(
    var(--semi-orange-0),
    1
  ); // 浅版警示色（多用于背景），表示警告、不安全的状态

  --semi-color-warning-light-hover: rgb(
    var(--semi-orange-1),
    1
  ); // 浅版警示色悬浮态

  --semi-color-warning-light-active: rgb(
    var(--semi-orange-2),
    1
  ); // 浅版警示色激活态

  //  ========= text color 文本色 =========
  --semi-color-text-0: rgb(var(--semi-grey-9), 1); // 文本/图标颜色 - 最主要
  --semi-color-text-1: rgb(var(--semi-grey-9), 0.8); // 文本/图标颜色 - 稍次要
  --semi-color-text-2: rgb(var(--semi-grey-9), 0.62); // 文本/图标颜色 - 次要
  --semi-color-text-3: rgb(var(--semi-grey-9), 0.35); // 文本/图标颜色 - 最次要
  --semi-color-link: rgb(var(--semi-blue-5), 1); // 链接颜色
  --semi-color-link-hover: rgb(var(--semi-blue-6), 1); // 链接颜色 - 悬浮态
  --semi-color-link-active: rgb(var(--semi-blue-7), 1); // 链接颜色 - 激活态
  --semi-color-link-visited: rgb(var(--semi-blue-5), 1); // 链接颜色 - 已访问

  //  ========= surface color 表面色 =========
  --semi-color-nav-bg: rgb(var(--semi-white), 1); // 导航背景色
  --semi-color-overlay-bg: rgb(22 22 26 / 60%); // 蒙层背景色
  // 主要用于有交互行为的组件，如input/select
  --semi-color-fill-0: rgb(var(--semi-grey-8), 0.05); // 填充色 - 默认态
  --semi-color-fill-1: rgb(var(--semi-grey-8), 0.09); // 填充色 - 悬浮态
  --semi-color-fill-2: rgb(var(--semi-grey-8), 0.13); // 填充色 - 激活态
  // 不同层的背景颜色，通常每层背景色都为白色，所以不常用
  --semi-color-bg-0: rgb(var(--semi-white), 1); // 背景色 - 最下层（底部页面）
  --semi-color-bg-1: rgb(
    var(--semi-white),
    1
  ); // 背景色 - 次下层（页面中需要提升的内容）

  --semi-color-bg-2: rgb(var(--semi-white), 1); // 背景色 - 中间层（模态等容器）
  --semi-color-bg-3: rgb(
    var(--semi-white),
    1
  ); // 背景色 - 次上层（通知，Toast等）

  --semi-color-bg-4: rgb(var(--semi-white), 1); // 背景色 - 最上层（特殊）

  //  ========= disabled color 禁用色 =========
  --semi-color-disabled-text: rgb(var(--semi-grey-9), 0.35); // 禁用态 - 文字
  --semi-color-disabled-border: rgb(var(--semi-grey-1), 1); // 禁用态 - 描边
  --semi-color-disabled-bg: rgb(var(--semi-grey-1), 1); // 禁用态 - 背景
  --semi-color-disabled-fill: rgb(var(--semi-grey-8), 0.04); // 禁用态 - 填充

  //  ========= shadow color 阴影色 =========
  // https://ant.design/docs/spec/shadow-cn
  // 阴影由光照而产生。主要影响其值的是物体高度与光源位置：
  //     在不同高度上时，投射出的阴影颜色、模糊度、面积都有所区分。离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小；
  //     而投影的方向主要由光源与物体的相对位置决定。
  // 在 Ant Design 中不同的阴影方向使用在不同的地方：
  //     阴影向下：主要应用于组件内部或组件本身，是比较常规场景的用法
  //     阴影向上：主要应用于底部导航或工具栏等
  //     阴影向左：主要应用于右边导航栏、抽屉组件或固定表格栏
  //     阴影向右：主要应用于左边导航栏、抽屉组件或固定表格栏
  //     阴影是模拟的真实世界的反馈，Ant Design 为了更符合真实阴影，在 4.0 中采用了三层阴影的表达方式，让阴影更柔和，更符合真实状态。
  // 一级阴影：
  --semi-shadow-1-up:
    0px -1px 2px -2px rgb(0 0 0 / 16%), 0px -3px 6px 0px rgb(0 0 0 / 12%),
    0px -5px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-down:
    0px 1px 2px -2px rgb(0 0 0 / 16%), 0px 3px 6px 0px rgb(0 0 0 / 12%),
    0px 5px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-left:
    -1px 0px 2px -2px rgb(0 0 0 / 16%), -3px 0px 6px 0px rgb(0 0 0 / 12%),
    -5px 0px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-right:
    1px 0px 2px -2px rgb(0 0 0 / 16%), 3px 0px 6px 0px rgb(0 0 0 / 12%),
    5px 0px 12px 4px rgb(0 0 0 / 9%);

  // 二级阴影：
  --semi-shadow-2-up:
    0px -3px 6px -4px rgb(0 0 0 / 12%), 0px -6px 16px 0px rgb(0 0 0 / 8%),
    0px -9px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-down:
    0px 3px 6px -4px rgb(0 0 0 / 12%), 0px 6px 16px 0px rgb(0 0 0 / 8%),
    0px 9px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-left:
    -3px 0px 6px -4px rgb(0 0 0 / 12%), -6px 0px 16px 0px rgb(0 0 0 / 8%),
    -9px 0px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-right:
    3px 0px 6px -4px rgb(0 0 0 / 12%), 6px 0px 16px 0px rgb(0 0 0 / 8%),
    9px 0px 28px 8px rgb(0 0 0 / 5%);

  // 三级阴影：
  --semi-shadow-3-up:
    0px -6px 16px -8px rgb(0 0 0 / 8%), 0px -9px 28px 0px rgb(0 0 0 / 5%),
    0px -12px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-down:
    0px 6px 16px -8px rgb(0 0 0 / 8%), 0px 9px 28px 0px rgb(0 0 0 / 5%),
    0px 12px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-left:
    -6px 0px 16px -8px rgb(0 0 0 / 8%), -9px 0px 28px 0px rgb(0 0 0 / 5%),
    -12px 0px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-right:
    6px 0px 16px -8px rgb(0 0 0 / 8%), 9px 0px 28px 0px rgb(0 0 0 / 5%),
    12px 0px 48px 16px rgb(0 0 0 / 3%);

  //  ========= 其他颜色 =========
  //  border color 描边色 卡片边框，分割线
  --semi-color-border: rgb(var(--semi-grey-9), 0.08); // 默认描边颜色
  --semi-color-focus-border: rgb(var(--semi-blue-5), 1); // 多用于边框激活态颜色
  --semi-color-highlight-bg: rgb(var(--semi-yellow-4), 1); // 高亮文本背景色
  --semi-color-highlight: rgb(var(--semi-black), 1); // 高亮文本色
}

body[theme-mode='dark'],
body .semi-always-dark {
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;

  --semi-color-white: rgb(228 231 245 / 100%);
  --semi-color-black: rgb(var(--semi-black), 1);
  --semi-color-primary: rgb(var(--semi-blue-5), 1);
  --semi-color-primary-hover: rgb(var(--semi-blue-6), 1);
  --semi-color-primary-active: rgb(var(--semi-blue-7), 1);
  --semi-color-primary-disabled: rgb(var(--semi-blue-2), 1);
  --semi-color-primary-light-default: rgb(var(--semi-blue-5), 0.2);
  --semi-color-primary-light-hover: rgb(var(--semi-blue-5), 0.3);
  --semi-color-primary-light-active: rgb(var(--semi-blue-5), 0.4);
  --semi-color-secondary: rgb(var(--semi-light-blue-5), 1);
  --semi-color-secondary-hover: rgb(var(--semi-light-blue-6), 1);
  --semi-color-secondary-active: rgb(var(--semi-light-blue-7), 1);
  --semi-color-secondary-disabled: rgb(var(--semi-light-blue-2), 1);
  --semi-color-secondary-light-default: rgb(var(--semi-light-blue-5), 0.2);
  --semi-color-secondary-light-hover: rgb(var(--semi-light-blue-5), 0.3);
  --semi-color-secondary-light-active: rgb(var(--semi-light-blue-5), 0.4);
  --semi-color-tertiary: rgb(var(--semi-grey-5), 1);
  --semi-color-tertiary-hover: rgb(var(--semi-grey-6), 1);
  --semi-color-tertiary-active: rgb(var(--semi-grey-7), 1);
  --semi-color-tertiary-light-default: rgb(var(--semi-grey-5), 0.2);
  --semi-color-tertiary-light-hover: rgb(var(--semi-grey-5), 0.3);
  --semi-color-tertiary-light-active: rgb(var(--semi-grey-5), 0.4);
  --semi-color-info: rgb(var(--semi-blue-5), 1);
  --semi-color-info-hover: rgb(var(--semi-blue-6), 1);
  --semi-color-info-active: rgb(var(--semi-blue-7), 1);
  --semi-color-info-disabled: rgb(var(--semi-blue-2), 1);
  --semi-color-info-light-default: rgb(var(--semi-blue-5), 0.2);
  --semi-color-info-light-hover: rgb(var(--semi-blue-5), 0.3);
  --semi-color-info-light-active: rgb(var(--semi-blue-5), 0.4);
  --semi-color-success: rgb(var(--semi-green-5), 1);
  --semi-color-success-hover: rgb(var(--semi-green-6), 1);
  --semi-color-success-active: rgb(var(--semi-green-7), 1);
  --semi-color-success-disabled: rgb(var(--semi-green-2), 1);
  --semi-color-success-light-default: rgb(var(--semi-green-5), 0.2);
  --semi-color-success-light-hover: rgb(var(--semi-green-5), 0.3);
  --semi-color-success-light-active: rgb(var(--semi-green-5), 0.4);
  --semi-color-danger: rgb(var(--semi-red-5), 1);
  --semi-color-danger-hover: rgb(var(--semi-red-6), 1);
  --semi-color-danger-active: rgb(var(--semi-red-7), 1);
  --semi-color-danger-light-default: rgb(var(--semi-red-5), 0.2);
  --semi-color-danger-light-hover: rgb(var(--semi-red-5), 0.3);
  --semi-color-danger-light-active: rgb(var(--semi-red-5), 0.4);
  --semi-color-warning: rgb(var(--semi-orange-5), 1);
  --semi-color-warning-hover: rgb(var(--semi-orange-6), 1);
  --semi-color-warning-active: rgb(var(--semi-orange-7), 1);
  --semi-color-warning-light-default: rgb(var(--semi-orange-5), 0.2);
  --semi-color-warning-light-hover: rgb(var(--semi-orange-5), 0.3);
  --semi-color-warning-light-active: rgb(var(--semi-orange-5), 0.4);
  --semi-color-focus-border: rgb(var(--semi-blue-5), 1);
  --semi-color-disabled-text: rgb(var(--semi-grey-9), 0.35);
  --semi-color-disabled-border: rgb(var(--semi-grey-1), 1);
  --semi-color-disabled-bg: rgb(var(--semi-grey-1), 1);
  --semi-color-disabled-fill: rgb(var(--semi-grey-8), 0.04);
  --semi-color-link: rgb(var(--semi-blue-5), 1);
  --semi-color-link-hover: rgb(var(--semi-blue-6), 1);
  --semi-color-link-active: rgb(var(--semi-blue-7), 1);
  --semi-color-link-visited: rgb(var(--semi-blue-5), 1);
  --semi-color-nav-bg: rgb(35 36 41 / 100%);
  --semi-shadow-elevated:
    inset 0 0 0 1px rgb(255 255 255 / 10%), 0 4px 14px rgb(0 0 0 / 25%);
  --semi-color-overlay-bg: rgb(22 22 26 / 60%);
  --semi-color-fill-0: rgb(var(--semi-white), 0.12);
  --semi-color-fill-1: rgb(var(--semi-white), 0.16);
  --semi-color-fill-2: rgb(var(--semi-white), 0.2);
  --semi-color-border: rgb(var(--semi-white), 0.08);
  --semi-color-shadow: rgb(var(--semi-black), 0.04);
  --semi-color-bg-0: rgb(22 22 26 / 100%);
  --semi-color-bg-1: rgb(35 36 41 / 100%);
  --semi-color-bg-2: rgb(53 54 60 / 100%);
  --semi-color-bg-3: rgb(67 68 74 / 100%);
  --semi-color-bg-4: rgb(79 81 89 / 100%);
  --semi-color-text-0: rgb(var(--semi-grey-9), 1);
  --semi-color-text-1: rgb(var(--semi-grey-9), 0.8);
  --semi-color-text-2: rgb(var(--semi-grey-9), 0.6);
  --semi-color-text-3: rgb(var(--semi-grey-9), 0.35);
  --semi-color-highlight-bg: rgb(var(--semi-yellow-2), 1); // 高亮文本背景色
  --semi-color-highlight: rgb(var(--semi-white), 1); // 高亮文本色

  // 一级阴影：
  --semi-shadow-1-up:
    0px -1px 2px -2px rgb(0 0 0 / 16%), 0px -3px 6px 0px rgb(0 0 0 / 12%),
    0px -5px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-down:
    0px 1px 2px -2px rgb(0 0 0 / 16%), 0px 3px 6px 0px rgb(0 0 0 / 12%),
    0px 5px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-left:
    -1px 0px 2px -2px rgb(0 0 0 / 16%), -3px 0px 6px 0px rgb(0 0 0 / 12%),
    -5px 0px 12px 4px rgb(0 0 0 / 9%);
  --semi-shadow-1-right:
    1px 0px 2px -2px rgb(0 0 0 / 16%), 3px 0px 6px 0px rgb(0 0 0 / 12%),
    5px 0px 12px 4px rgb(0 0 0 / 9%);

  // 二级阴影：
  --semi-shadow-2-up:
    0px -3px 6px -4px rgb(0 0 0 / 12%), 0px -6px 16px 0px rgb(0 0 0 / 8%),
    0px -9px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-down:
    0px 3px 6px -4px rgb(0 0 0 / 12%), 0px 6px 16px 0px rgb(0 0 0 / 8%),
    0px 9px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-left:
    -3px 0px 6px -4px rgb(0 0 0 / 12%), -6px 0px 16px 0px rgb(0 0 0 / 8%),
    -9px 0px 28px 8px rgb(0 0 0 / 5%);
  --semi-shadow-2-right:
    3px 0px 6px -4px rgb(0 0 0 / 12%), 6px 0px 16px 0px rgb(0 0 0 / 8%),
    9px 0px 28px 8px rgb(0 0 0 / 5%);

  // 三级阴影：
  --semi-shadow-3-up:
    0px -6px 16px -8px rgb(0 0 0 / 8%), 0px -9px 28px 0px rgb(0 0 0 / 5%),
    0px -12px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-down:
    0px 6px 16px -8px rgb(0 0 0 / 8%), 0px 9px 28px 0px rgb(0 0 0 / 5%),
    0px 12px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-left:
    -6px 0px 16px -8px rgb(0 0 0 / 8%), -9px 0px 28px 0px rgb(0 0 0 / 5%),
    -12px 0px 48px 16px rgb(0 0 0 / 3%);
  --semi-shadow-3-right:
    6px 0px 16px -8px rgb(0 0 0 / 8%), 9px 0px 28px 0px rgb(0 0 0 / 5%),
    12px 0px 48px 16px rgb(0 0 0 / 3%);
}
